import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Button, List, Modal, Pagination, Card } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import styles from './style.module.scss';
//state
import { WordListState, WordListIndex } from './reducer';
import { WordSearcherState } from '../WordSearcher/reducer';
//action
import * as WordListAction from './reducer'
import * as MainInfo from '../MainInfo/reducer'

export interface WordListProps {
    fetchWordList: typeof WordListAction.fetchByCondition;
    // onFirstLoadWordList: typeof WordListAction.fetch;
    // fetchWordInfo: typeof WordInfoAction.fetch;
    removeWord: typeof WordListAction.remove;
    highLightWord: typeof WordListAction.highlight;
    mainInfoSetWord: typeof MainInfo.setWord;
    state: WordListState;
    wordSearchState: WordSearcherState
}
export const _WordList: React.FC<WordListProps> = props => {
    const { state, wordSearchState, fetchWordList, removeWord, highLightWord, mainInfoSetWord } = props;
    const { dto: listValue } = props.state;
    const [deleteWordValue, setDeleteWordValue] = useState("");
    const [modalVisible, setModalVisible] = useState(false);

    useEffect(() => {
        fetchWordList(wordSearchState, 0, 10);
    }, [fetchWordList, wordSearchState])

    useEffect(() => {
        if (state.dto.count === 0) {
            mainInfoSetWord(null)
        }
        else {
            highLightWord(state.dto.dtos.length - 1)
            mainInfoSetWord(state.dto.dtos[state.dto.dtos.length - 1].wordValue)
        }
    }, [highLightWord, mainInfoSetWord, state.dto.count, state.dto.dtos])

    return (
        <Card
            title='单词表'
        >
            <Card
                size='small'
            >
                <Pagination
                    onChange={(page, size) => fetchWordList(wordSearchState, page - 1, size)}
                    size='small'
                    total={listValue.count}
                    showSizeChanger
                    showQuickJumper />
            </Card>
            <List
                className={styles.wordList}
                bordered
                dataSource={listValue.dtos}
                renderItem={(item: WordListIndex, index: number) => {
                    let itemStyle = styles.listItem
                    if (index === state.highlight)
                        itemStyle = styles.listItemSelect
                    return (
                        <List.Item className={itemStyle}
                            onClick={() => {
                                // fetchWordInfo(item.wordValue);
                                highLightWord(index);
                                mainInfoSetWord(item.wordValue)
                            }}>
                            <div>{item.wordValue}</div>
                            <Button icon={<DeleteOutlined />} onClick={() => {
                                setDeleteWordValue(item.wordValue);
                                setModalVisible(true);
                            }} />
                        </List.Item>
                    )
                }}
            />
            <Modal
                title={<div>确认删除单词<strong>{deleteWordValue}</strong>？？</div>}
                visible={modalVisible}
                onOk={(): void => {
                    removeWord(deleteWordValue);
                    setModalVisible(false);
                }}
                onCancel={(): void => setModalVisible(false)}
                okText="删"
                cancelText="不要"
            >
                我记得好像不能撤销的
            </Modal>
        </Card>

    )
}

const mapStateToProps = (state: RootState) => ({
    state: state.WordListState,
    wordSearchState: state.WordSearcherState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        fetchWordList: WordListAction.fetchByCondition,
        removeWord: WordListAction.remove,
        highLightWord: WordListAction.highlight,
        mainInfoSetWord: MainInfo.setWord
    }, dispatch);

const WordList = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordList)

export default WordList